<template>
  <a-drawer
    v-model:open="open"
    class="custom-class"
    root-class-name="root-class-name"
    style="color: red"
    size="large"
    title="点赞列表"
    placement="right"
    @expand="expand"
    @after-open-change="afterOpenChange"
  >
    <a-table row-key="id" :columns="columns" :pagination="pagination" :loading="loading" :data-source="items" @change="tableChange">
      <template #title>
        <div class="flex justify-between">
          <div class="flex">
          </div>
          <a-form layout="inline" :model="searchData" @finish="fetch({...searchData, page: pagination.current})">
            <a-form-item>
              <a-input v-model:value="searchData.title" placeholder="点赞名称">
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" html-type="submit">
                搜索
              </a-button>
            </a-form-item>
          </a-form>
        </div>
      </template>
    </a-table>
  </a-drawer>
 </template>
<script lang="ts">
import {page, list} from "@/mixins"

export default {
	mixins: [page, list],
	data() {
		return {
			title: '新增点赞',
			loadPath: 'user-upvote',
			open: false,
			columns: [
				{
					title: 'ID',
					dataIndex: 'id',
					width: 100
				},
				{
					title: '用户',
					dataIndex: 'nickname',
				},
				{
					title: '点赞时间',
					dataIndex: 'create_at',
				},
			],
			searchData: {
				title: '',
				activity_id: 0
			}
		}
	},
	methods: {
		add(){
			this.$refs.form.formData.activity_id = this.searchData.activity_id
			this.$refs.form.add()
		},
		afterOpenChange(e: boolean){
			if(e && this.searchData.activity_id > 0){
				this.items = []
				this.fetch({...this.searchData, page: this.pagination.current})		
			}
		},
		expand(a, b){
			console.log(a, b)
		}
	}
}
</script>